<script setup>
  import { ref, onMounted } from 'vue'
  import { recordCountAPI } from '@/api/order/contract'
  import useList from '@/hooks/useList'
  import OrderItem from './orderItem.vue'
  const tabs = ['全部', '待生成', '未发起', '签署中', '已完成', '已撤回', '已截止签署', '作废中', '已作废', '无效', '生成失败']
  const recordCounts = ref() //顶部数据

  const searchBarSearch = (e) => {
    queryParam.value.contractNoOrOrderCode = e
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
    recordCount()
  }
  const queryParam = ref({
    payType: 1,
  })
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/svmsContract/signRecord',
    queryParam,
  )
  const tabsChange = (e) => {
    dataSource.value = []
    console.log(queryParam.value)
    queryParam.value.pageNumber = 1
    switch (e) {
      case 0:
        queryParam.value.contractStatus = undefined
        recordCount()
        loadData()
        break
      case 1:
        queryParam.value.contractStatus = -2
        recordCount()
        loadData()
        break
      case 2:
        queryParam.value.contractStatus = 1
        recordCount()
        loadData()
        break
      case 3:
        queryParam.value.contractStatus = 2
        recordCount()
        loadData()
        break
      case 4:
        queryParam.value.contractStatus = 3
        recordCount()
        loadData()
        break
      case 5:
        queryParam.value.contractStatus = 4
        recordCount()
        loadData()
        break
      case 6:
        queryParam.value.contractStatus = 6
        recordCount()
        loadData()
        break
      case 7:
        queryParam.value.contractStatus = 7
        recordCount()
        loadData()
        break
      case 8:
        queryParam.value.contractStatus = 8
        recordCount()
        loadData()
        break
      case 9:
        queryParam.value.contractStatus = 9
        recordCount()
        loadData()
        break
      case 10:
        queryParam.value.contractStatus = -1
        recordCount()
        loadData()
        break
    }
  }
  const recordCount = async () => {
    const res = await recordCountAPI(queryParam.value)
    console.log(res)
    recordCounts.value = res.result
  }

  const init = (param) => {
    queryParam.value = {
      ...queryParam.value,
      ...param,
    }
    recordCount()
    resetRefresh()
  }
  onMounted(() => {
    loadData()
    recordCount()
  })

  defineExpose({
    init,
  })
</script>

<template>
  <view class="container">
    <view class="page-filter">
      <ve-search-bar placeholder="请输入合同编号/关联订单号/客户名称" @search="searchBarSearch"></ve-search-bar>
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange" style="background: #ffffff"></ve-tabs>
    </view>

    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <ve-card style="margin: 24rpx 24rpx 0" class="contract_card">
        <image class="contract_backimg" src="@/static/images/contract_backimg.png" mode="widthFix" />
        <view class="contract_nums">
          <view class="line_1"></view>
          <view class="line_2"></view>
          <view class="num">
            <view class="tlt fs24 fw400">账户余额</view>
            <view class="nums">
              <text class="fs40 fw600 pic-num">{{ recordCounts?.accountBalance || '-' }}</text>
              <text class="fs24 fw400 pic">元</text>
            </view>
          </view>
          <view class="num num_2">
            <view class="tlt fs24 fw400">已消费金额</view>
            <view class="nums">
              <text class="fs40 fw600">{{ recordCounts?.companyConsumeAmount || '-' }}</text>
              <text class="fs24 fw400">元</text>
            </view>
          </view>
          <view class="num num_3">
            <view class="tlt fs24 fw400">企业合同收费标准</view>
            <view class="nums">
              <text class="fs40 fw600">{{ recordCounts?.companyContractChargeAmount || '-' }}</text>
              <text class="fs24 fw400">元</text>
            </view>
          </view>
          <view class="num num_4">
            <view class="tlt fs24 fw400">个人合同收费标准</view>
            <view class="nums">
              <text class="fs40 fw600">{{ recordCounts?.personContractChargeAmount || '-' }}</text>
              <text class="fs24 fw400">元</text>
            </view>
          </view>
        </view>
        <view class="tips">
          <view class="c1 fs26 fw400">付费版电子合同扣费说明：</view>
          <view class="c2 fs26 fw400">1、当合同状态变更为：签署中且双方未签署时，会预先扣费，如此时撤回合同不再签署，则不收取费用。</view>
          <view class="c2 fs26 fw400"
            >2、当合同状态变更为：签署中(一方已签署)、已完成、已撤回(一方已签署)、作废中、已作废时，收取费用。</view
          >
        </view>
      </ve-card>
      <view class="record-list">
        <OrderItem v-for="record in dataSource" :record="record" :key="record.id" @resetRefresh="init" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: rgba(247, 248, 250, 1);
    padding-bottom: 132rpx;
  }
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }

  .contract_card {
    position: relative;
    height: 568rpx;
    background-color: #fff;
    .contract_backimg {
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 284rpx;
      overflow: hidden;
      border-radius: 8rpx;
      overflow: hidden;
      box-shadow: 0 10rpx 30rpx 0 rgba(34, 102, 238, 28%);
    }
    .contract_nums {
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 284rpx;
      .line_1 {
        position: absolute;
        width: 2rpx;
        height: 90rpx;
        top: 32rpx;
        left: 50%;
        background: #eaecef;
        margin-left: -1rpx;
      }
      .line_2 {
        position: absolute;
        width: 2rpx;
        height: 90rpx;
        bottom: 32rpx;
        left: 50%;
        background: #eaecef;
        margin-left: -1rpx;
      }
      .num {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        width: 50%;
        height: 142rpx;
        margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .tlt {
        }
        .nums {
          margin-top: 14rpx;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          text:nth-child(1) {
            line-height: 1;
          }
          text:nth-child(2) {
            margin-left: 12rpx;
          }
          .pic-num {
            color: #fffb00;
          }
          .pic {
            color: #fffb00;
          }
        }
      }
      .num_2 {
        position: absolute;
        top: 0;
        left: 50%;
      }
      .num_3 {
        position: absolute;
        top: 50%;
        left: 0;
      }
      .num_4 {
        position: absolute;
        top: 50%;
        left: 50%;
      }
    }

    .tips {
      position: absolute;
      top: 308rpx;
      left: 32rpx;
      right: 32rpx;
      view:nth-child(1) {
        line-height: 46rpx;
        margin-bottom: 6rpx;
      }
      view:nth-child(2) {
        line-height: 46rpx;
      }
      view:nth-child(3) {
        line-height: 46rpx;
      }
    }
  }

  .record-list {
    padding: 24rpx 24rpx;
  }
  .manager-search {
    position: sticky;
    top: 44px;
    z-index: 999;
  }
  .manager-tabs {
    background-color: #fff;
  }
  .ve-bottom-box {
    height: auto;
  }
</style>
